<template>
	<div class="index">
		<Header></Header>
		<!-- 内容 -->
		<div class="w65 ma">
			<!-- 面包屑 -->
			<breadcrumb></breadcrumb>
		</div>
		<div class="conent-top">
			<div class="w65 ma p05 pt2">
				<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="110px" class="demo-ruleForm">
					<el-row>
						<el-col :span="8">
							<el-form-item label="钻孔柱状图" prop="image">
								<el-upload
									ref="upload"
									:class="{ uoloadSty: showBtnImg, disUoloadSty: noneBtnImg }"
									action
									accept="image/png,image/gif,image/jpg,image/jpeg"
									list-type="picture-card"
									:file-list="fileLists"
									:auto-upload="false"
									:before-upload="handleBeforeUpload"
									:on-change="handleImgChange"
									:on-remove="handleRemove"
								>
									<i class="el-icon-plus"></i>
								</el-upload>
								<el-dialog :visible.sync="dialogVisible"><img width="100%" :src="dialogImageUrl" alt="" /></el-dialog>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="钻孔编号" prop="number">
								<el-input style="width: 18rem;" clearable placeholder="请输入钻孔编码" v-model="ruleForm.number"></el-input>
							</el-form-item>
							<el-form-item label="经度" prop="longitude">
								<el-input style="width: 18rem;" clearable placeholder="请输入经度" v-model="ruleForm.longitude"></el-input>
							</el-form-item>
							<el-form-item label="纬度" prop="latitude">
								<el-input style="width: 18rem;" clearable placeholder="请输入纬度" v-model="ruleForm.latitude"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="钻孔名称" prop="keyword">
								<el-input style="width: 18rem;" clearable placeholder="请输入关键字" v-model="ruleForm.keyword"></el-input>
							</el-form-item>
							<!-- <el-form-item label="工作区名称" prop="name">
								<el-input style="width: 18rem;" placeholder="请输入工作区名称" v-model="ruleForm.name"></el-input>
							</el-form-item> -->
							<el-form-item label="钻孔类型" prop="drill_type">
								<el-select style="width: 18rem;" clearable v-model="ruleForm.drill_type" placeholder="请选择钻孔类型">
									<el-option v-for="item in optionsDrillType" :key="item.drill_type" :label="item.label" :value="item.drill_type"></el-option>
								</el-select>
							</el-form-item>
							<el-form-item label="钻孔日期" prop="drillDate">
								<el-date-picker
									style="width: 18rem;"
									value-format="yyyy-MM-dd"
									clearable
									v-model="daterange"
									@change="selDaterange"
									type="daterange"
									range-separator="至"
									start-placeholder="开始日期"
									end-placeholder="结束日期"
								></el-date-picker>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="钻孔深度" prop="altitude">
								<el-input style="width: 18rem;" clearable placeholder="请输入钻孔深度" v-model="ruleForm.altitude">
									<template slot="prepend">
										<el-select style="width: 7rem;" v-model="ruleForm.al_operation">
											<el-option v-for="item in al_operationOption" :key="item.value" :label="item.label" :value="item.value"></el-option>
										</el-select>
									</template>
								</el-input>
							</el-form-item>
							<el-form-item label="项目名称" prop="entry_name">
								<el-input style="width: 18rem;" clearable placeholder="请输入项目名称" v-model="ruleForm.entry_name"></el-input>
							</el-form-item>
							<el-form-item label="工作程度" prop="degree_of_work">
								<el-input style="width: 18rem;" clearable placeholder="请输入工作程度" v-model="ruleForm.degree_of_work"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="审批人" prop="s_id">
								<el-select style="width: 18rem;" clearable v-model="ruleForm.s_id" placeholder="请选择审批人">
									<el-option v-for="item in optionsName" :key="item.id" :label="item.username" :value="item.id"></el-option>
								</el-select>
							</el-form-item>
							<el-form-item label="比例尺" prop="scale">
								<el-input style="width: 18rem;" clearable placeholder="请输入比例尺" v-model="ruleForm.scale"></el-input>
							</el-form-item>
							<el-form-item label="主要矿种" prop="minerals">
								<el-input style="width: 18rem;" clearable placeholder="请输入主要矿种" v-model="ruleForm.minerals"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="业主手机号" prop="owner_phone">
								<el-input style="width: 18rem;" maxlength="11" clearable placeholder="请输入业主手机号" v-model="ruleForm.owner_phone"></el-input>
							</el-form-item>
							<el-form-item label="企业单位" prop="owner_unit">
								<el-input style="width: 18rem;" clearable placeholder="请输入企业单位" v-model="ruleForm.owner_unit"></el-input>
							</el-form-item>
							<el-form-item label="生产单位电话" prop="drill_phone">
								<el-input style="width: 18rem;" maxlength="11" clearable placeholder="请输入生产单位电话" v-model="ruleForm.drill_phone"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="保管单位" prop="construction_unit">
								<!-- <el-input style="width: 18rem;" clearable placeholder="请输入保管单位" v-model="ruleForm.construction_unit"></el-input> -->
								<autocomplete
									:allInfos="construction_unitname"
									:inputValue="inputValue"
									:placeholder="placeholderConstruction_unit"
									@dimDepartment="projectConstruction_unitName"
								></autocomplete>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="钻孔位置" prop="position">
								<el-input style="width: 18rem;" clearable placeholder="请输入钻孔位置" v-model="ruleForm.position"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="钻孔坐落" prop="district">
								<el-input style="width: 18rem;" clearable placeholder="请输入钻孔坐落" v-model="ruleForm.district"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="单位简介" prop="introduce">
								<el-input type="textarea" style="width: 31rem;" clearable placeholder="请输入单位简介" v-model="ruleForm.introduce"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="备注" prop="remark">
								<el-input clearable style="width: 31rem;" type="textarea" placeholder="请输入主要矿种" v-model="ruleForm.remark"></el-input>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="20">
						<el-col :span="12" :offset="8">
							<el-form-item>
								<el-button type="primary" :loading="loading" @click="submitForm('ruleForm')">
									<span v-if="!loading">提交审核</span>
									<span v-else>提交审核中...</span>
								</el-button>
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
			</div>
		</div>
		<!-- 底部 -->
		<Footer></Footer>
	</div>
</template>

<script>
import breadcrumb from '@/components/breadcrumb .vue';
import { approval, addDrills, upload, vagueSearch } from '@/api/drill.js';
import { getItem } from '@/utils/storage.js';
import autocomplete from '@/components/autocomplete.vue';
export default {
	name: 'addDrill',
	components: {
		breadcrumb,
		autocomplete
	},
	data() {
		//钻孔编号
		const numberData = (rule, value, callback) => {
			if (value == null) {
				callback(new Error('请输入钻孔编号'));
			} else if (!/^\d+$|^\d+[.]?\d+$/.test(value)) {
				callback(new Error('请正确的数字格式'));
			} else {
				callback();
			}
		};
		//经度
		const longitudeData = (rule, value, callback) => {
			if (value == null) {
				callback(new Error('请输入经度'));
			} else if (!/^\d+$|^\d+[.]?\d+$/.test(value)) {
				callback(new Error('请正确的数字格式'));
			} else {
				callback();
			}
		};
		//维度
		const latitudeData = (rule, value, callback) => {
			if (value == null) {
				callback(new Error('请输入维度'));
			} else if (!/^\d+$|^\d+[.]?\d+$/.test(value)) {
				callback(new Error('请正确的数字格式'));
			} else {
				callback();
			}
		};
		//钻孔深度
		const altitudeData = (rule, value, callback) => {
			if (value == null) {
				callback(new Error('请输入钻孔深度'));
			} else if (!/^\d+$|^\d+[.]?\d+$/.test(value)) {
				callback(new Error('请正确的数字格式'));
			} else {
				callback();
			}
		};
		// //业主电话
		// const owner_phoneData = (rule, value, callback) => {
		// 	if (value == null) {
		// 		callback(new Error('请输入业主手机号'));
		// 	} else if (!/^[1][3,4,5,7,8,9][0-9]{9}$/.test(value)) {
		// 		callback(new Error('请正确的手机号格式'));
		// 	} else {
		// 		callback();
		// 	}
		// };
		//生产单位电话
		const drill_phoneData = (rule, value, callback) => {
			if (value == null) {
				callback(new Error('请输入生产单位电话'));
			} else if (!/^[1][3,4,5,7,8,9][0-9]{9}$/.test(value)) {
				callback(new Error('请正确的手机号格式'));
			} else {
				callback();
			}
		};
		//钻孔日期
		const drillDateRules = (rule, value, callback) => {
			if (this.daterange.length == 0) {
				callback(new Error('请选择钻孔日期'));
			}
			callback();
		};
		return {
			ruleForm: {
				image: null,
				start_time: null,
				end_time: null,
				construction_unit: null,
				al_operation: '=',
				del_id: '',
				token: getItem('token')
			},
			construction_unitname: [],
			placeholderConstruction_unit: '请选择保管单位',
			daterange: [],
			showBtnImg: true,
			noneBtnImg: false,
			fileLists: [],
			dialogVisible: false,
			loading: false,
			dialogImageUrl: '',
			rules: {
				number: [{ required: true, validator: numberData, trigger: 'change' }],
				keyword: [{ required: true, message: '请输入关键字', trigger: 'blur' }],
				longitude: [{ required: true, validator: longitudeData, trigger: 'change' }],
				latitude: [{ required: true, validator: latitudeData, trigger: 'change' }],
				name: [{ required: true, message: '请输入工作区名称', trigger: 'blur' }],
				altitude: [{ required: true, validator: altitudeData, trigger: 'change' }],
				scale: [{ required: true, message: '请输入比例尺', trigger: 'blur' }],
				// owner_phone: [{ required: true, validator: owner_phoneData, trigger: 'blur' }],
				entry_name: [{ required: true, message: '请输入项目名称', trigger: 'blur' }],
				s_id: [{ required: true, message: '请选择审核人', trigger: 'change' }],
				// owner_unit: [{ required: true, message: '请输入企业单位', trigger: 'blur' }],
				// district: [{ required: true, message: '请输入钻孔坐落', trigger: 'blur' }],
				degree_of_work: [{ required: true, message: '请输入工作程度', trigger: 'blur' }],
				minerals: [{ required: true, message: '请输入主要矿种', trigger: 'blur' }],
				drill_phone: [{ required: true, validator: drill_phoneData, trigger: 'blur' }],
				construction_unit: [{ required: true, message: '请输入施工单位', trigger: 'blur' }],
				introduce: [{ required: true, message: '请输入单位简介', trigger: 'blur' }],
				remark: [{ required: true, message: '请输入钻孔位置', trigger: 'blur' }],
				position: [{ required: true, message: '请输入备注', trigger: 'blur' }],
				drill_type: [{ required: true, message: '请选择钻孔类型', trigger: 'change' }],
				drillDate: [{ required: true, validator: drillDateRules, trigger: 'change' }]
				// image: [{ required: true, validator: imageRules, trigger: 'change' }]
			},
			optionsName: [], //审核人
			optionsDrillType: [
				{
					label: '城市地质',
					drill_type: 1
				},
				{
					label: '地热资源',
					drill_type: 2
				},
				{
					label: '区域海洋',
					drill_type: 3
				}
			],
			al_operationOption: [
				{
					label: '等于',
					value: '='
				},
				{
					label: '大于',
					value: '>'
				},
				{
					label: '小于',
					value: '<'
				},
				{
					label: '小于等于',
					value: '<='
				},
				{
					label: '大于等于',
					value: '>='
				}
			]
		};
	},
	created() {
		let data = {
			token: getItem('token')
		};
		approval(data).then(res => {
			this.optionsName = res.data;
		});
		vagueSearch({ name: 'construction_unit' }).then(res => {
			if (res.code == 1001) {
				this.construction_unitname = res.data;
			}
		});
		if (this.$route.query.updateVal == '1') {
			let getData = this.$route.query.val;
			console.log(getData);
			this.ruleForm = getData;
			this.ruleForm.s_id = '',
			this.ruleForm.del_id = getData.id;
			this.ruleForm.token = getItem('token');
			this.ruleForm.drill_type = parseInt(getData.drill_type);
			this.daterange.push(getData.start_time, getData.end_time);
			this.ruleForm.construction_unit = getData.construction_unit;
			this.inputValue = getData.construction_unit;
			let fileName = {
				name: 'image',
				url: this.url + getData.image
			};
			this.fileLists.push(fileName);
		}
	},
	methods: {
		//选择日期区间
		selDaterange(val) {
			this.ruleForm.start_time = val[0];
			this.ruleForm.end_time = val[1];
		},
		// 上传文件之前的钩子
		handleBeforeUpload(file) {
			if (!(file.type === 'image/png' || file.type === 'image/gif' || file.type === 'image/jpg' || file.type === 'image/jpeg')) {
				this.$notify.warning({
					title: '警告',
					message: '请上传格式为image/png, image/gif, image/jpg, image/jpeg的图片'
				});
			}
			let size = file.size / 1024 / 1024 / 2;
			if (size > 2) {
				this.$notify.warning({
					title: '警告',
					message: '图片大小必须小于2M'
				});
			}
		},
		//施工单位
		projectConstruction_unitName(value) {
			this.ruleForm.construction_unit = value;
		},
		//选择文件变化
		handleImgChange(e, flies) {
			let formData = new FormData();
			formData.append('file', e.raw);
			upload(formData).then(res => {
				this.ruleForm.image = res.data;
			});
			this.noneBtnImg = flies.length >= 1;
			this.fileLists = flies;
		},
		// 文件列表移除文件时的钩子
		handleRemove(file, fileList) {
			this.ruleForm.image = null;
			this.noneBtnImg = fileList.length >= 1;
		},
		submitForm(formName) {
			this.$refs[formName].validate(valid => {
				if (valid) {
					console.log(this.ruleForm);
					this.loading = true;
					addDrills(this.ruleForm).then(res => {
						if (res.code == 1001) {
							setTimeout(() => {
								// this.loading = false;
								this.msgSuccess('成功,等待审核');
								this.$router.replace({
									path: '/drillAdmin'
								});
							}, 1500);
						}
					});
				} else {
					return false;
				}
			});
		}
	}
};
</script>

<style scoped lang="scss">
.conent-top {
	background-color: #ffffff;
	height: 65rem;
}
/deep/.el-form-item__label {
	text-align: right;
}
.el-button {
	background-color: #2f6bbb;
	margin-top: 4rem;
}
.uoloadSty {
	width: 100%;
	height: 10rem;
}
/deep/.disUoloadSty .el-upload--picture-card {
	display: none; /* 上传按钮隐藏 */
}
</style>
